<template>
    <div>
        <div class="header">
      <span>
        <label for="label_1">姓名: </label>
        <el-input
            v-model="search_name"
            placeholder="请输入内容"
            style="width: 200px"
            clearable
            id="label_1"
        ></el-input>
      </span>
            <span style="margin-left: 15px">
        <label for="label_2">用户名: </label>
        <el-input
            v-model="search_username"
            placeholder="请输入内容"
            style="width: 200px; height: 40px"
            clearable
            id="label_2"
        ></el-input>
      </span>
            <span style="margin-left: 15px">
        <label for="label_3">账号状态: </label>
        <el-select v-model="search_status" placeholder="请选择" id="label_3">
          <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"
              :label="item.label"
          >
          </el-option>
        </el-select>
      </span>
            <span style="margin-left: 15px">
        <label for="label_4">分组名: </label>
        <el-select v-model="search_groupId" placeholder="请选择" id="label_4">
          <el-option
              v-for="item in group_id_options"
              :key="item.id"
              :value="item.id"
              :label="item.group_name"
          >
          </el-option>
        </el-select>
      </span>

            <span
            ><el-button type="primary" @click="handelSearch" icon="el-icon-search"
            >查询</el-button
            ></span
            >
            <span><el-button type="primary" @click="handleAddUser">新增</el-button></span>
        </div>
        <div class="content">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                :row-style="{ height: '32px' }"
                :header-row-style="{ height: '10px' }"
                :cell-style="{ padding: '1px' }"
            >
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column
                    prop="username"
                    label="用户名"
                    width="180"
                ></el-table-column>
                <el-table-column
                    prop="role_name"
                    label="角色名"
                    width="180"
                ></el-table-column>
                <el-table-column prop="phone" label="联系方式"></el-table-column>
                <el-table-column prop="qq" label="QQ"></el-table-column>
                <el-table-column prop="group_name" label="分组名"></el-table-column>
                <el-table-column prop="is_attention" label="关注微信号" :formatter="handleFormatAttention"></el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column prop="" label="操作">
                    <template slot-scope="scope">
                        <i
                            class="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        ></i>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <i
                            class="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)"
                        ></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <div class="block">
                <el-pagination
                    @current-change="handleCurrentChange"
                    layout="total, prev, pager, next"
                    background
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <!-- 存放新增组件 -->
        <div v-show="showAdd">
            <AddUser ref="adduser"></AddUser>
        </div>
        <!-- 存放编辑组件 -->
        <div v-show="showEdit">
            <EditUser ref="edituser"></EditUser>
        </div>

    </div>
</template>

<script>
    import AddUser from "./AddUser";
    import EditUser from "./EditUser";

    export default {
        name: "UserList",
        data() {
            return {
                search_name: "",
                search_username: "",
                search_status: "",
                search_groupId: "",
                group_id_options: [],
                tableData: [],
                options: [
                    {value: "1", label: "启用"},
                    {value: "2", label: "禁用"},
                ],
                currentPage: 1, // 默认 1
                total: 0,
                showAdd: false,
                showEdit: false
            };
        },
        methods: {
            handleEdit(index, row) {
                this.showEdit = true;
                this.$refs.edituser.handleOpen(row);
            },
            // 执行删除
            handleDelete(index, row) {
                // console.log(index, row.id);
                this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    let curUserId = this.COOKIE.get("uid");
                    this.AXIOS.post(`/api/user/del/${curUserId}/${row.id}`)
                        .then((res) => {
                            // console.log(res.data.status);
                            if (res.data.status === 1) {
                                this.$message({
                                    type: "success",
                                    message: "删除成功!",
                                });
                                // 刷新
                                this.handleInitUserListData();
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.data.msg,
                                });
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                });
            },
            // 查询
            handelSearch() {
                let searchCondition = {
                    page: this.currentPage,
                    search_name: this.search_name,
                    search_username: this.search_username,
                    search_status: this.search_status,
                    search_groupId: this.search_groupId,
                };
                // console.log(searchCondition);

                this.AXIOS.get("/api/user/list", {params: searchCondition})
                    .then((res) => {
                        this.tableData = res.data.data;
                    })
                    .catch((err) => {
                        console.error(err);
                    });
            },
            // 分页
            handleCurrentChange(curPage) {
                this.handleInitUserListData(curPage);
            },
            // 添加用户界面
            handleAddUser() {
                this.showAdd = true;
                this.$refs.adduser.handleOpen();  // 调用子组件中的 open() 方法
                // 清空选项中的内容
                this.name = "";
                this.username = "";
                this.password = "";
                this.role_id = "";
                this.phone = "";
                this.qq = "";
            },
            // 加载数据
            handleInitUserListData(curPage = 1) {
                // console.log(curPage);
                this.AXIOS.get(`/api/user/list?cur_page=${curPage}`)
                    .then((res) => {
                        // console.log(res.data.data)
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                    })
                    .catch((err) => {
                        console.error(err);
                    });

                // 获取分组名
                this.AXIOS.get("/api/user/getGroupInfo")
                    .then(resp => {
                        console.log(resp.data.data)
                        this.group_id_options = resp.data.data;
                    })
                    .catch(err => {
                        console.log(err)
                    });
            },
            handleFormatAttention(row, column) {
                let msg = '';
                if (row.is_attention === 1) {
                    msg = '已关注';
                } else {
                    msg = '未关注';
                }
                return msg;
            }
        },
        components: {
            AddUser,
            EditUser
        },

        // 加载页面数据
        mounted() {
            this.handleInitUserListData();
        },
    };
</script>

<style scoped>
    .header {
        text-align: left;
        /* font-weight: bold; */
    }

    .content {
        margin-top: 40px;
    }

    .footer {
        position: fixed;
        bottom: 15px;
        left: 200px;
    }
</style>
